const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin} = require("clean-webpack-plugin")
/* glob 是一种文件匹配模式，起源于 Unix ，比如我们常见 *.js 匹配所有 js 文件就是使用了 glob 模式 */
const {
  glob,
  globSync,
  globStream,
  globStreamSync,
  Glob,
} = require('glob');
/**  
 *  ./jquery/**是可以向后匹配多层目录。./jquery/* 只能向后匹配一级目录
 *  glob后面的匹配规则使用 path.join拼接不知道怎么回事无法进行匹配
 */
const entryFiles = globSync('./jquery/*/index.js')
const entry={}

const HtmlWebpackPlugins=[]

entryFiles.forEach(item=>{
  console.log(item)
  const folder= item.match(/jquery\\(.*)\\index\.js$/)
  const pageName=folder[1]
  entry[pageName]="./"+item
  HtmlWebpackPlugins.push(
    new HtmlWebpackPlugin({
      chunks:[pageName],
      title:"custom template",
      filename:`${pageName}.html`,
      template:`./jquery/${pageName}/index.html`,
      inject:"body"  //inject：有4个值: true | 'head' | 'body' | false
    })
  )
})
module.exports={
    entry:entry,
    output: {
        filename:"[name].js",
        path:path.resolve(__dirname,'jquery/dist'),
        environment: {
          arrowFunction :false//webpack打包时不使用箭头函数，兼容低版本浏览器
        }
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      ...HtmlWebpackPlugins
      // new HtmlWebpackPlugin({
      //   /**
      //    * 执行webpack打包命令，在 ./dist 文件夹下会生成，main.js和index.html两个文件，index.html文件引入了main.js文件。
      //    */
      //   title:"custom template",
      //   template:"./jquery/domOperation/index.html",
      //   inject:"body"  //inject：有4个值: true | 'head' | 'body' | false
      // })
    ],
    mode: "development"
}